<!-- <script type="text/javascript" src="js/test.js"></script>
<body style="background:#000">
	<div style="width:500px; height:400px; background:#fff; margin:15px auto; position:relative; text-align:center;" id="table"
		onmousedown="coordinateXY(event)">
		<div style="width:40px; height:40px; border-radius:5px; background:#f00; display:table; position:absolute;" id="zz">
			<span style="display: table-cell; vertical-align: top;">aa</span>
			<span style="display: table-cell; vertical-align: bottom;">bb</span>
		</div>
		<div style="width:40px; height:40px; border-radius:5px; background:#ccc; display:table; position:absolute; left:5%;" id="zzz">
			<span style="display: table-cell; vertical-align: top;">cc</span>
			<span style="display: table-cell; vertical-align: bottom;">dd</span>
		</div>
		<div style="width:60px; height:60px; border-radius:5px; background:#f00; top:50%;position:absolute;
margin-top:-30px; left:50%; margin-left:-30px;" id="src">
			
		</div>
	</div>
	<div style="width:100%; margin:10px auto; float:left; text-align:center">
		<input type="button" value="Animation Line!!" onclick="action(1, ['zz','zzz'])"></input>
		<input type="button" value="Animation Circle!!" onclick="action(2, 'zz')"></input>
		<input type="button" value="Animation Ellipse!!" onclick="action(3, 'zz')"></input>
		<input type="button" value="Stop!!" onclick="stop()"></input>
		<input type="button" value="Reset!!" onclick="reset(['zz','zzz'])"></input>
	</div>
	<div style="width:100%; margin:10px auto; float:left; text-align:center; color:#fff">
		Xo : <input type="text" name="Xo" value=0></input><br>
		Yo : <input type="text" name="Yo" value=0></input><br>
		X1 : <input type="text" name="X1" value=100></input><br>
		Y1 : <input type="text" name="Y1" value=150></input><br>
		t : <input type="text" name="t" value=2></input><br>
		<input type="button" value="Go!!" onclick="go(['zz','zzz'])"></input>
	</div>
</body> -->
<html>
<body>

<style type="text/css">
.alert {
   display:none;
   position:absolute;
   top:1px;
   left:1px;
   width:100%;
   height:100%;
   background-color:white;
   border-style:solid;
   border-width:1px;
   padding:15px 20px 5px 20px;
   }
</style>

<div id="AlertBox" class="alert">
<p>
Hi! This is a test.
</p>
<p>
It is only a test. If this had been the real thing, then this would not be a test.
</p>
<form style="text-align:right">
<input 
   type="button" 
   value="OK" 
   style="width:75px;" 
   onclick="document.getElementById('AlertBox').style.display='none'">
</form>
</div>

<script type="text/javascript"><!--
function DisplayAlert(id,left,top) {
document.getElementById(id).style.left=left+'px';
document.getElementById(id).style.top=top+'px';
document.getElementById(id).style.display='block';
}
//--></script>

<script type="text/javascript"><!--
function DoSomething() {
var something = false;
if(something) {
   // do this section
   }
else {
   DisplayAlert('AlertBox',100,50);
   }
}
//--></script>

<p>
<a href="javascript:DoSomething()">
Click here</a> 
to demonstrate the alert box alternative.
</p>

</body>
</html>
